<template>
    <div style="padding:15px">
        <vxe-toolbar
            id="toolbarId_fa2"
            :custom="{storage: true}"
            export
            :refresh="{query: findList}"
        >
            <template v-slot:buttons>
                <el-button @click="funcFilter">查询</el-button>
                <el-button @click="funcAdd">新增</el-button>
            </template>
        </vxe-toolbar>
        <vxe-table
            ref="xTable"
            border
            show-footer
            resizable
            stripe
            highlight-current-row
            :export-config='{type:"csv"}'
            highlight-hover-row
            row-id="id"
            class="mytable-footer"
            height="700"
            :data="tableData"
            :loading="loading"
            :sort-config="{ remote: true }"
            export-config
            show-overflow
            align="center"
            @sort-change="sortList"
            :seq-config="{startIndex: listQuery.pageNum * listQuery.pageSize - listQuery.pageSize}"
        >
            <vxe-table-column type="seq" width="60"></vxe-table-column>
            <vxe-table-column type="checkbox" width="60"></vxe-table-column>
            <vxe-table-column>
                <vxe-table-column field="name" title="报表名称" min-width="100" sortable />
                <template v-slot:header="{ column }">
                    <el-input v-model="listQuery.name" placeholder="请输入报表名称" clearable />
                </template>
            </vxe-table-column>
            <vxe-table-column>
                <vxe-table-column
                    field="type"
                    title="报表类型"
                    :formatter="formatterType"
                    min-width="100"
                    sortable
                />
                <template v-slot:header="{ column }">
                    <el-select v-model="listQuery.type" placeholder="请选择" clearable>
                        <el-option
                            v-for="item in typeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </template>
            </vxe-table-column>
            <vxe-table-column>
                <vxe-table-column
                    field="isDefault"
                    title="是否是默认"
                    :formatter="formatterIsDefault"
                    min-width="100"
                    sortable
                />
                <template v-slot:header="{ column }">
                    <el-select v-model="listQuery.isDefault" placeholder="请选择" clearable>
                        <el-option
                            v-for="item in isDefaultOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </template>
            </vxe-table-column>
            <vxe-table-column>
                <vxe-table-column field="remark" title="备注" min-width="100" sortable />
                <template v-slot:header="{ column }">
                    <el-input v-model="listQuery.remark" placeholder="请输入备注" clearable />
                </template>
            </vxe-table-column>
            <vxe-table-column>
                <vxe-table-column field="gmtCreated" title="创建时间" min-width="350" sortable />
                <template v-slot:header="{ column }">
                    <div class="block">
                        <el-date-picker
                            v-model="gmtCreatedRange"
                            type="daterange"
                            value-format="yyyy-MM-dd"
                            :picker-options="pickerOptions"
                            style="width:100%"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"

                            @change="changeDate"
                        />
                    </div>
                </template>
            </vxe-table-column>
            <vxe-table-column field="action" title="操作" min-width="260" fixed="right">
                <template slot-scope="scope">
                    <el-tooltip  effect="dark" content="详情" placement="top">
                        <vxe-button type="text" @click="funcDetail(scope.row.code)">
                            <i class="el-icon-document" />
                        </vxe-button>
                    </el-tooltip>
                    <el-tooltip  effect="dark" content="编辑" placement="top">
                        <vxe-button type="text" @click="funcEdit(scope.row.code)">
                            <i class="el-icon-edit" />
                        </vxe-button>
                    </el-tooltip>
                    <el-tooltip  effect="dark" content="删除" placement="top">
                        <vxe-button type="text" @click="funcDelete(scope.row.code)">
                            <i class="el-icon-delete" />
                        </vxe-button>
                    </el-tooltip>
                    <el-tooltip  effect="dark" content="设置" placement="top">
                        <vxe-button type="text" @click="funcSetReport(scope.row.code,scope.row.type)">
                            <i class="el-icon-s-tools" />
                        </vxe-button>
                    </el-tooltip>
                    <el-tooltip  effect="dark" content="查看报表" placement="top">
                        <vxe-button type="text" @click="funcViewReport(scope.row.code)">
                            <i class="el-icon-reading" />
                        </vxe-button>
                    </el-tooltip>
                </template>
            </vxe-table-column>
        </vxe-table>
        <vxe-pager
            :loading="loading"
            :current-page.sync="listQuery.pageNum"
            :page-sizes="Pagingconf"
            :page-size.sync="listQuery.pageSize"
            :total="listQuery.total"
            :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
            @page-change="handlePageChange"
        />
        <vxe-modal v-model="modelAddFlag" title="新增" width="500" height="450" resize>
            <compAdd ref="addRef" @fatherAddMethod="fatherAdd" @fatherCancelMethod="fatherCancel" />
        </vxe-modal>
        <vxe-modal v-model="modelEditFlag" title="编辑" width="500" height="450" destroy-on-close resize>
            <compEdit
                :reportFroms="reportFroms"
                @fatherEditMethod="fatherEdit"
                @fatherCancelMethod="fatherCancel"
            />
        </vxe-modal>
        <vxe-modal v-model="modelDetailFlag" title="详情" width="500" height="550" destroy-on-close resize>
            <compDetail :reportFroms="reportFroms" />
        </vxe-modal>
    </div>
</template>
<script>
import Vue from 'vue'
import compAdd from './components/diyReportAdd.vue'
import compEdit from './components/diyReportEdit.vue'
import compDetail from './components/diyReportDetail.vue'
import request from '@/utils/request'
import { diyReport } from '@/api/financialStatistics'
export default {
    name: '自定义表',
    components: {
        compAdd,
        compEdit,
        compDetail,
    },
    data() {
        return {
            pickerOptions: {
                shortcuts: [
                    {
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 7
                            )
                            picker.$emit('pick', [start, end])
                        },
                    },
                    {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 30
                            )
                            picker.$emit('pick', [start, end])
                        },
                    },
                    {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 90
                            )
                            picker.$emit('pick', [start, end])
                        },
                    },
                ],
            },
            gmtCreatedRange: [],
            message: '',
            loading: false,
            tableData: [],
            modelAddFlag: false,
            modelEditFlag: false,
            modelDetailFlag: false,
            copy: false,
            listQuery: {
                code: '',
                branchCode: '',
                name: '',
                type: '',
                isDefault: '',
                remark: '',
                gmtCreatedStart: '',
                gmtCreatedEnd: '',
                pageNum: 1,
                pageSize: 20,
                sortField: '',
                sortType: '',
                total: 0,
            },
            Pagingconf: [],
            // 报表类型
            typeOptions: [
                { label: '库存明细', value: 0, color: 'gray' },
                { label: '出库流水', value: 1, color: '#0000ff' },
                { label: '入库流水', value: 2, color: '#0000ff' },
            ],
            // 是否默认
            isDefaultOptions: [
                { label: '否', value: 0, color: 'gray' },
                { label: '是', value: 1, color: '#0000ff' },
            ],
            reportFroms:'', //新 跳转传值
        }
    },
    created() {
        this.findList()
    },
    methods: {
        findList() {
            this.loading = true
            return new Promise((resolve) => {
                diyReport(this.listQuery).then((response) => {
                    this.tableData = response.data.records
                    this.listQuery.total = response.data.total
                    this.Pagingconf = [20, 30, 50, 100]
                    this.loading = false
                    resolve()
                })
            })
        },
        // 查询
        funcFilter() {
            this.listQuery.pageNum = 1
            this.findList()
        },
        // 排序
        sortList({ column, property, order }) {
            if (order) {
                this.listQuery.sortField = property
                this.listQuery.sortType = order
            } else {
                this.listQuery.sortField = ''
            }
            this.findList()
        },
        //设置报表
        funcSetReport(code,reportType) {
            this.$router.push({
                path: '/zhcx/diyReportSet',
                query: { code,reportType  },
            })
        },
        //查看报表
        funcViewReport(code) {
            this.$router.push({
                path: '/zhcx/diyReportReal',
                query: { code},
            })
        },
        // 添加方法
        funcAdd() {
            this.modelAddFlag = true
        },
        // 修改方法
        funcEdit(code) {
            this.reportFroms = code
            this.modelEditFlag = true
        },
        // 详情方法
        funcDetail(code) {
            this.reportFroms = code
            this.modelDetailFlag = true
        },
        // 删除方法
        funcDelete(row) {
            this.$confirm('确认删除吗？')
                .then((_) => {
                    request({
                        url: `/wms/diyReport`,
                        method: 'delete',
                        params: { codes: row },
                    }).then((response) => {
                        this.$message({
                            message: response.msg,
                            type: 'success',
                        })
                        this.findList()
                    })
                })
                .catch((_) => {})
        },
        // 翻译报表类型
        formatterType({ cellValue }) {
            const item = this.typeOptions.find(
                (item) => item.value === cellValue
            )
            return item ? item.label : ''
        },
        // 翻译默认
        formatterIsDefault({ cellValue }) {
            const item = this.isDefaultOptions.find(
                (item) => item.value === cellValue
            )
            return item ? item.label : ''
        },
        //时间change事件
        changeDate(value) {
            if (value) {
                this.listQuery.gmtCreatedStart = value[0] + ' 00:00:00'
                this.listQuery.gmtCreatedEnd = value[1] + ' 23:59:59'
            } else {
                this.listQuery.gmtCreatedStart = ''
                this.listQuery.gmtCreatedEnd = ''
            }
        },
        // 增加组件的父方法
        fatherAdd() {
            this.modelAddFlag = false
            this.findList()
        },
        // 编辑组件的父方法
        fatherEdit() {
            this.modelEditFlag = false
            this.findList()
        },
        // 公共取消
        fatherCancel(modelFlag) {
            switch (modelFlag) {
                case 'add':
                    this.modelAddFlag = false
                    break
                case 'edit':
                    this.modelEditFlag = false
                    break
                case 'detail':
                    this.modelDetailFlag = false
                    break
                default:
            }
        },
        // 分页handle
        handlePageChange({ currentPage, pageSize }) {
            this.listQuery.pageNum = currentPage
            this.listQuery.pageSize = pageSize
            this.findList()
        },
    },
}
</script>

<style>
</style>
